<template>
  <el-tabs type="border-card" class="demo-tabs"  @tab-change="handleCut">
    <div class="attributes" style="height: 60px;width: 100%">
      <div class="query_condition">
        <div>
          <span>选择日期:</span>
          <el-date-picker
              type="daterange"
              range-separator="~"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="small"
              style="width: 156px"
          />
        </div>

        <div>
          <span>类型:</span>
          <el-select
              v-model="genreData"
              multiple
              placeholder="请选择"
              size="small"
              style="width: 180px"
          >
            <el-option
                v-for="item in genreMsg"
                :key="item.value"
                :label="item.label"
                :value="item.value"

            />
          </el-select>
        </div>

        <div>
          <span>发送范围:</span>
          <el-cascader :options="beginMsg" size="small" clearable style="width: 82px" />
          <el-cascader :options="beginMsg" size="small" clearable style="width: 82px" />
        </div>

        <div>
          <span>快速搜索:</span>
          <el-input placeholder="请输入标题或发布者姓名" size="small" style="width: 150px; font-size: 8px"/>
        </div>

        <div>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
    </div>

    <div class="mainInfo">
      <div class="mainInfo__button">
        <el-button type="primary" class="issueAdd" @click="goIssue"><el-icon><DocumentAdd /></el-icon>发布通知</el-button>
      </div>
      <div class="mainInfo__form">

        <el-tab-pane label="通知列表">
          <list-form />
        </el-tab-pane>

        <el-tab-pane label="我的发布">
          <my-list-form />
        </el-tab-pane>
      </div>
    </div>

  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { TabPaneName } from 'element-plus'
import listForm from './tabularData/listForm.vue'
import myListForm from './tabularData/myListForm.vue'

//获取路由管理实例
const router = useRouter();

// 类型相关数据
const genreData = ref([])
const genreMsg = [
  {
    value: 'inform1',
    label: '通知',
  },
  {
    value: 'inform2',
    label: '公告',
  },
  {
    value: 'inform3',
    label: '活动',
  },
  {
    value: 'inform4',
    label: '缴费通知',
  },
  {
    value: 'inform5',
    label: '选课通知',
  },
  {
    value: 'inform6',
    label: '缴费通知',
  },
]

// 发送范围数据
const beginMsg = [
  {
    value: '1',
    label: '年级班级'
  },
  {
    value: '2',
    label: '教室分组'
  }
]

// 跳转issueForm
function goIssue(){
  router.push('/index/jiaxiaohudong/informList/issueForm')
  console.log(1)
}
</script>


<style scoped>
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
/* Element */
.el-range-editor.el-input__wrapper{
  width: 185px;
}
.tab_from{
  margin-top: 50px;
}
:deep(.el-tabs__nav-scroll){
  margin: 10px 0 0 10px;
}
:deep(.el-tabs__content){
  margin: 0;
}

/* 自定义样式 */
.demo-tabs{
  margin-left: 10px;
}
.attributes{
  display: flex;
  justify-items: center;
  align-items: center;
}
.query_condition{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  font-size: 14px;
}
.query_condition div{
  display: flex;
  align-items: center;
}
.query_condition button{
  height: 22px;
  width: 65px;
}

/*  */
.mainInfo{
  margin-top: 20px;
  position: relative;
  display: grid;
  grid-template-rows: 50px 100%;
  border: 1px solid #e5e5e5;
}
.mainInfo__button{
  display: flex;
  justify-content: right;
  align-items: center;
}
.mainInfo__form{
  padding: 10px;
}

.issueAdd{
  font-size: 13px;
  width: 72px;
  margin: 0 10px;
}

</style>
